<script setup lang="ts">
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onRenderTracked,
  onRenderTriggered,
  onUnmounted,
  onUpdated,
  ref,
} from "vue";

const num = ref(0);
const div = ref<HTMLDivElement>();

console.log("setup");

onBeforeMount(() => {
  // 读不到dom
  console.log("onBeforeMount", div.value);
});
onMounted(() => {
  // 可以读到dom
  console.log("onMounted", div.value);
});
onBeforeUpdate(() => {
  // 更新之前的dom
  console.log("onBeforeUpdate", div.value?.innerText);
});
onUpdated(() => {
  // 更新之后的dom
  console.log("onUpdated", div.value?.innerText);
});
onBeforeUnmount(() => {
  console.log("onBeforeUnmount");
});
onUnmounted(() => {
  console.log("onUnmounted");
});
onRenderTracked((e) => {
  // 用于调试
  console.log("onRenderTracked", e);
});
onRenderTriggered((e) => {
  // 用于调试
  console.log("onRenderTriggered", e);
});
</script>

<template>
  <div>生命周期</div>
  <div ref="div">{{ num }}</div>
  <button @click="num++">+1</button>
</template>

<style scoped></style>
